import PageLayout from "@/components/PageLayout";

import {
  ColorSwatch,
  ColorInput,
  Group,
  Flex,
  Badge,
  Box,
  Overlay,
  Modal,
  Table,
  Checkbox,
  Pagination,
  Image,
  Paper,
  Text,
  Center,
  LoadingOverlay,
  ActionIcon,
  Tooltip,
  Button,
  TextInput,
  Textarea,
  Alert,
} from "@mantine/core";
import { IconInfoCircle } from "@tabler/icons-react";

import { useAPIUtils } from "@/components/APIUtilsProvider";
import { useTabbyForm } from "@/hooks/useTabbyForm";
import { useLocation } from "react-router-dom";
import WithwingsProgressIndicator from "../../components/WithwingsProgressIndicator";
import { notifications } from "@mantine/notifications";

export default function SendNotification() {
  const { pathname } = useLocation();
  const { restPOST } = useAPIUtils();

  const form = useTabbyForm(pathname, "notificationCreate", {
    initialValues: {
      title: "",
      content: "",
    },

    validate: {
      title: (value) => (/^\s*$/.test(value) ? "请输入标题" : null),
      content: (value) => (/^\s*$/.test(value) ? "请输入内容" : null),
    },
  });

  const simNotification = async ({ title, content }) => {
    await restPOST("/simNotification", { title, content });
    form.reset();
    notifications.show({
      title: "操作成功",
      color: "green",
    });
  };

  return (
    <PageLayout title={"发送通知演示"}>
      <Alert variant="light" title="提示" icon={<IconInfoCircle />}>
        通知 是管理系统中常见的功能。 用于提醒用户一些正在或已经发生的事件，
        例如审批通过等等。本页面可以手动向除当前登录用户以外的用户发送通知，以演示通知功能。
      </Alert>
      <Box maw={600} mx="auto">
        <form onSubmit={form.onSubmit((values) => simNotification(values))}>
          <TextInput
            withAsterisk
            label="标题"
            {...form.getInputProps("title")}
          />

          <Textarea
            withAsterisk
            label="内容"
            placeholder="随便说点什么"
            autosize={true}
            minRows={8}
            {...form.getInputProps("content")}
          />

          <Group justify="flex-end" mt="md">
            <Button type="submit">发送</Button>
          </Group>
        </form>
      </Box>
    </PageLayout>
  );
}
